<template>
    <rx-button class="rx-btn-icon" @click="onClick" :title="title" :class="{
        'is-circle':circle
    }"><rx-icon :name="name"/></rx-button>
</template>

<script>
export default {
    name:'button-icon',
    props:{
        name:{
            type:String,
            required:true
        },
        title:{
            type:String,
            required:true
        },
        circle:{
            type:Boolean,
            default:false
        }
    },
    methods: {
        onClick(){
            this.$emit('click')
        }
    }
}
</script>

<style lang="scss">
.rx-btn.rx-btn-icon{
    padding: 8px;

    &.is-circle{
        padding: 8px;
        border-radius: 100%; 
        border:none;
        color: #A9ADC9;
        background-color: transparent;
    }
}
</style>
